<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体排印</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<header>
    <h1>字体排印</h1>
</header>
<main>
    <section>
        <h2>20 连字符断行</h2>
        <div class="hyphenation">
            The only way to get rid of a temptation is to yield to it.
        </div>
    </section>
    <section>
        <h2>21 插入换行</h2>
        <dl class="line-breaks">
            <dt>Name:</dt>
            <dd>Lea Verou</dd>
            <dt>Email:</dt>
            <dd>lea@verou.me</dd>
            <dd>leaverou@mit.edu</dd>
            <dt>Location:</dt>
            <dd>Earth</dd>
        </dl>
    </section>
    <section>
        <h2>22 文本的斑马线</h2>
        <pre class="zebra-lines">
.line-breaks dd + dd::before {
    content: ', ';
    font-weight: normal;
    margin-left: -0.25em;
}
        </pre>
    </section>
    <section>
        <h2>25 华丽的&符号</h2>
        <div class="ampersands">HTML & CSS</div>
    </section>
    <section>
        <h2>26 自定义下划线</h2>
        <div class="underlines">
            "The only way to get rid of temptation is to yield to it."
        </div>
    </section>
    <section>
        <h2>27 现实中的文字效果</h2>
        <section>
            <h3>凸版印刷效果</h3>
            <div class="letterpress">
                "The only way to get rid of temptation is to yield to it."
            </div>
        </section>
        <section>
            <h3>空心字效果</h3>
            <div class="stroked-text">
                CSS
            </div>
        </section>
        <section>
            <h3>文字外发光效果</h3>
            <div class="glow">Glow</div>
        </section>
        <section>
            <h3>文字凸起效果</h3>
            <div class="extruded">CSS3D</div>
        </section>
    </section>
</main>
</body>
</html>
